<extend name="Public:Base" />
<block name="head">
    <link rel="stylesheet" href="/Public/ke/themes/default/default.css" />
	<script charset="utf-8" src="/Public/ke/kindeditor-min.js"></script>
	<script charset="utf-8" src="/Public/ke/lang/zh_CN.js"></script>
</block>
<block name="content">
	<style type="text/css">
		.item{display: inline-block;width: 310px;height: 235px;overflow: hidden;position: relative;}
		.item img{width: 300px;}
		.item .odiv{background: #ccc;display: none;}
		.item h3{background: #333;color: white;position: absolute;height: 25px;top: 210px;width: 300px;}
		.item span{position: absolute;top: 100px;left: 145px;}
		.item span a{text-decoration: none;}
	</style>
	<div class="main-title">
		<h2>相册管理</h2>
	</div>
	<div class="cf">
		<div class="fl">
			<button class="btn" id="UploadPhoto">新 增</button>
			<html:select options="CateList" id="cate" change="window.location='__URL__/index/cid/'+this.value" />
		</div>
	</div>
	<div class="data-table table-striped" id="ImageView">
		<volist name="list" id="vo">
			<div class="item" id="Item{$vo.id}">
				<img src="{$vo.thu_img}" alt="{$vo.title}"/>
				<div class="odiv">
					<h3>{$vo.title}</h3>
					<span><a href="javascript:delPhoto({$vo.id});" class="btn">删除</a></span>
				</div>
			</div>
		</volist>
	</div>
	<div class="page"><div>{$page}</div></div>
</block>
<block name="__body">
	<script>
		function delPhoto(id){
			get('__URL__/delete/id/'+id,function(){ $('#Item'+id).remove();});
		}
		KindEditor.ready(function(K) {
			var editor = K.editor({
				allowFileManager : true,
	            uploadJson : '/admin.php?s=Photo/keupload&cid={$Think.get.cid}',
	            fileManagerJson : '/admin.php?s=User/file_manager'
			});
			K('#UploadPhoto').click(function() {
				editor.loadPlugin('multiimage', function() {
					editor.plugin.multiImageDialog({
						clickFn : function(urlList) {
							var div = K('#ImageView');
							K.each(urlList, function(i, data) {
								div.append('<div class="item"><img src="' + data.url + '"></div>');
							});
							editor.hideDialog();
						}
					});
				});
			});
		});
		$('.item').hover(
			function(){ $(this).find('.odiv').show();},
			function(){ $(this).find('.odiv').hide();}
		);
	</script>
</block>